.box{
  margin: 100px auto;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(-30deg);
  position: relative;
  transition:all 2s;
  &:hover{
    transform: rotateX(180deg) rotateZ(180deg);
  }
  .item{
    position: absolute;
    width: 100%;
    height: 100%;
    background: palegoldenrod;
    text-align: center;
    line-height: 100px;
    opacity: .4;
    font-size: 32px;
    font-weight: bolder;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    span{
      border: 2px solid #fff;
      background: #00f5ff;
    }
  }
  & .item:nth-child(1){
    transform: translateZ(50px);
    span{
      background: red;
    }
  }
  & .item:nth-child(2){
    transform: translateX(50px) rotateY(90deg);
    span{
      background: green;
    }
  }
  & .item:nth-child(3){
    transform: translateZ(-50px);
    span{
      background: orange;
    }
  }
  & .item:nth-child(4){
    transform: translateX(-50px) rotateY(-90deg);
    span{
      background: blue;
    }
  }
  & .item:nth-child(5){
    transform: translateY(-50px) rotateX(90deg);
    span{
      background: yellow;
    }
  }
  & .item:nth-child(6){
    transform: translateY(50px) rotateX(90deg);
  }
}
